<script setup>
import { auditBusinessLicenseApi, getJobListApi, jobAuditApi } from '@/api/job'
import { updateUserStatusApi } from '@/api/user'
import Form from '@/components/User/Form.vue'
import Pagization from '@/components/common/pagization.vue'
import { showStatusMessage } from '@/utils/common/showMessage'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { getStudentStatusListApi } from '@/api/studentStatus'

const router = useRouter()
const userStore = useUserStore()
// 表单数据
const formData = ref({
  account: '',
  name: ''
})
const formModel = [
  {
    prop: 'studentAccount',
    label: '学生账号',
    type: 'input'
  },
  {
    prop: 'name',
    label: '学生姓名',
    type: 'input'
  },
  {
    prop: 'enterpriseName',
    label: '企业名称',
    type: 'input'
  }
]
const btnOpt = [
  {
    name: '查询',
    btnType: '',
    prop: 'query'
  },
  {
    name: '重置',
    btnType: 'info',
    prop: 'reset'
  }
]

const pagizationToatl = ref(null)

// 在script setup中添加tabs相关配置
const activeTab = ref(0) // 当前激活的tab

const tabs = [
  { label: '申请职位', value: 0 },
  { label: '面试信息', value: 1 },
  { label: '入职信息', value: 2 }
  // { label: '就业材料', value: 3 }
]

/**
 * 获取表格数据
 */
async function getTableData(data = {}) {
  const res = await getStudentStatusListApi({
    ...data,
    status: activeTab.value
  })

  // 使用模拟数据
  tableData.value = res.data.map((item) => {
    return {
      ...item,
      jobLocation: Array.isArray(item.jobLocation)
        ? item.jobLocation
        : JSON.parse(item.jobLocation)
          ? JSON.parse(item.jobLocation)
          : []
    }
  })
  pagizationToatl.value = res.total
}
getTableData()
const pagizationRef = ref(null)
const selectFormRef = ref(null)
/**
 * 点击重置按钮
 */
function reset() {
  // 先重置表单数据
  selectFormRef.value.reset()
  // 清空查询条件
  queryData.value = null
  // 重新获取数据
  getTableData()
  // 重置分页
  pagizationRef.value.reset()
}

/**
 * 表单按钮点击事件
 * @param type 操作类型
 * @param data 表单数据
 */
function handleForm(type, data) {
  // console.log(type, data)
  switch (type) {
    case 'query':
      query(data)
      break
    case 'add':
      addForm()
      break
    case 'output':
      exportToExcel()
      break
    case 'reset':
      reset(data)
      break
    case 'import':
      handleUpload(data)
    default:
      break
  }
}

/**
 * 表单查询事件
 * @param {Object} data 查询条件
 */
const queryData = ref(null)
async function query(data) {
  queryData.value = data
  await getTableData(data)
}

// 列表数据
const tableData = ref([])

// 不同状态下的操作按钮配置 - 将所有状态的操作按钮设置为空数组
const optionsConfig = {
  0: [], // 申请工作状态 - 无操作按钮
  1: [], // 确认面试状态 - 无操作按钮
  2: [], // 入职状态 - 无操作按钮
  3: [] // 就业材料状态 - 无操作按钮
}

// 根据当前tab获取对应的操作按钮
const options = computed(() => {
  return optionsConfig[activeTab.value]
})

/**
 * 修改账号是否被禁用事件
 * @param data 0|1禁用状态
 */
async function handletTableSwitch(data) {
  console.log(data)
  const res = await updateUserStatusApi({
    account: data.account,
    status: data.status
  })
  showStatusMessage(res)
}

// 分页器条数发生变化
function handleSizeChange(val) {
  const data = selectFormRef.value.getValue()
  console.log('条数发生变化')
  getTableData({ size: val, ...data })
  pagizationRef.value.reset()
}
// 分页器页数发生变化
function handleCurrentChange(page, size) {
  const data = selectFormRef.value.getValue()
  console.log('页数发生变化')
  getTableData({ page, size, ...data })
}

// 审核通过
async function handletTableBy(data) {
  const res = await jobAuditApi({ ...data, result: 2 })
  showStatusMessage(res)
  getTableData()
}
// 审核不通过
async function handletTableNoBy(data) {
  const res = await jobAuditApi({ ...data, result: 1 })
  showStatusMessage(res)
  getTableData()
}

// 控制抽屉显示
const dialog = ref(false)
// 抽屉数据
const dialogData = ref({})

// 添加tab切换处理函数
function handleTabClick(tab, e) {
  // 重置表单
  selectFormRef.value.reset()
  // 清空查询条件
  queryData.value = null
  // 切换tab时重新获取数据
  getTableData(queryData.value || {})
}

// 需要添加新的处理函数
function handleConfirmInterview(data) {
  // 处理确认面试逻辑
  console.log('确认面试', data)
}

function handleConfirmEntry(data) {
  // 处理确认入职逻辑
  console.log('确认入职', data)
}

function handleCheckMaterials(data) {
  // 处理审核材料逻辑
  console.log('审核材料', data)
}

function getStatusType(status) {
  const statusMap = {
    0: 'info', // 待审核
    1: 'danger', // 不通过
    2: 'success' // 通过
  }
  return statusMap[status] || 'info'
}
function getStatusEntryType(status) {
  const statusMap = {
    0: 'info', // 待审核
    1: 'danger', // 不通过
    2: 'success' // 通过
  }
  return statusMap[status] || 'info'
}

function getStatusText(status) {
  const statusMap = {
    0: '待审核',
    1: '不通过',
    2: '通过'
  }
  return statusMap[status] || '未知状态'
}
function getStatusEntryText(status) {
  const statusMap = {
    0: '等待中',
    1: '未入职',
    2: '入职'
  }
  return statusMap[status] || '暂未确定'
}

function handlejobLocationSwitch(data) {
  console.log(tableData.value)
  tableData.value.forEach((item) => {
    console.log(item.jobLocation)
  })
}
</script>

<template>
  <div class="license-wrapper">
    <div class="user-content">
      <el-tabs v-model="activeTab" @tab-change="handleTabClick">
        <el-tab-pane
          v-for="item in tabs"
          :key="item.value"
          :label="item.label"
          :name="item.value"
        />
      </el-tabs>

      <Form
        :data="formData"
        :formOpt="formModel"
        :btnOpt="btnOpt"
        @handleForm="handleForm"
        ref="selectFormRef"
      ></Form>

      <!-- 新的内容展示区域 -->
      <div class="status-content">
        <!-- 申请工作状态 -->
        <div v-if="activeTab === 0" class="job-apply-list">
          <el-empty v-if="!tableData.length" description="暂无申请数据" />
          <el-card v-else v-for="item in tableData" :key="item.id" class="status-card job-card">
            <div class="job-header">
              <h3>{{ item.jobName }}</h3>
              <el-tag :type="getStatusType(item.status)">{{ getStatusText(item.status) }}</el-tag>
            </div>
            <div class="job-info">
              <div class="info-item">
                <span class="el-icon-office-building">申请人账号：</span>
                <span>{{ item.studentAccount }}</span>
              </div>
              <div class="info-item">
                <span class="el-icon-office-building">申请人姓名：</span>
                <span>{{ item.name }}</span>
              </div>

              <div class="info-item">
                <span class="el-icon-office-building">公司名称：</span>
                <span>{{ item.enterpriseName }}</span>
              </div>
              <div class="info-item">
                <span class="el-icon-money">薪资：</span>
                <span>{{ item.salary }}</span>
              </div>
            </div>
            <div class="job-time">申请时间：{{ item.create_time }}</div>
          </el-card>
        </div>

        <!-- 确认面试状态 -->
        <div v-if="activeTab === 1" class="interview-list">
          <el-empty v-if="!tableData.length" description="暂无面试信息" />
          <el-timeline v-else>
            <el-timeline-item
              v-for="item in tableData"
              :key="item.id"
              :timestamp="item.interviewTime"
              placement="top"
            >
              <el-card class="interview-card">
                <div class="interview-header">
                  <h4>{{ item.enterpriseName }} - {{ item.jobName }}</h4>
                  <el-tag :type="getStatusType(item.interviewresult)">{{
                    getStatusText(item.interviewresult)
                  }}</el-tag>
                </div>

                <div class="interview-info">
                  <!-- 基本信息 -->
                  <div class="info-section">
                    <div class="info-item" v-if="item.name">
                      <span class="label">申请人姓名：</span>
                      <span>{{ item.name }}</span>
                    </div>
                    <div class="info-item" v-if="item.studentAccount">
                      <span class="label">学生账号：</span>
                      <span>{{ item.studentAccount }}</span>
                    </div>
                    <div class="info-item" v-if="item.exterpriseAccount">
                      <span class="label">企业账号：</span>
                      <span>{{ item.exterpriseAccount }}</span>
                    </div>
                  </div>

                  <!-- 面试信息 -->
                  <div class="info-section">
                    <div class="info-item" v-if="item.interviewer">
                      <span class="label">面试官：</span>
                      <span>{{ item.interviewer }}</span>
                    </div>
                    <div class="info-item" v-if="item.interviewTime">
                      <span class="label">面试时间：</span>
                      <span>{{ item.interviewTime }}</span>
                    </div>
                    <div class="info-item" v-if="item.interviewPlace">
                      <span class="label">面试地址：</span>
                      <span>{{ JSON.parse(item.interviewPlace).join(',') }}</span>
                    </div>
                    <div class="info-item" v-if="item.interviewDetailPlace">
                      <span class="label">详细地址：</span>
                      <span>{{ item.interviewDetailPlace }}</span>
                    </div>
                  </div>

                  <!-- 面试结果 -->
                  <div class="info-section" v-if="item.interviewresult">
                    <div class="info-item">
                      <span class="label">面试结果：</span>
                      <el-tag
                        size="small"
                        :type="
                          item.interviewresult === '0'
                            ? 'info'
                            : item.interviewresult === '2'
                              ? 'success'
                              : 'danger'
                        "
                      >
                        {{
                          item.interviewresult === '0'
                            ? '等待通知'
                            : item.interviewresult === '2'
                              ? '通过'
                              : '未通过'
                        }}
                      </el-tag>
                    </div>
                    <div class="info-item" v-if="item.interviewresulttime">
                      <span class="label">结果时间：</span>
                      <span>{{ item.interviewresulttime }}</span>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 入职状态 -->
        <div v-if="activeTab === 2" class="entry-list">
          <el-empty v-if="!tableData.length" description="暂无入职信息" />
          <el-row v-else :gutter="20">
            <el-col :span="12" v-for="item in tableData" :key="item.id">
              <el-card class="entry-card">
                <div class="entry-header">
                  <el-avatar
                    v-if="item.enterpriseImg"
                    :size="50"
                    :src="item.enterpriseImg"
                  ></el-avatar>
                  <svg
                    v-else
                    t="1737215927805"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4295"
                    width="40"
                    height="40"
                  >
                    <path
                      d="M943.6 1024H586V190l366.5 127.2C977.9 326.1 995 350 995 377v595.6c0 28.4-23 51.4-51.4 51.4z"
                      fill="#B8EADA"
                      p-id="4296"
                    ></path>
                    <path
                      d="M721.6 1024H117.5c-49.1 0-88.8-30.9-88.8-69.1V216.3c0-49.4 43.8-92.3 105.6-103.6l582.5-106c13.2-2.4 25.8 5.4 25.8 15.9v985.1c0 9-9.4 16.3-21 16.3z"
                      fill="#24C891"
                      p-id="4297"
                    ></path>
                    <path
                      d="M389.6 571h-8c-49.7 0-90-40.3-90-90v-8c0-49.7 40.3-90 90-90h8c49.7 0 90 40.3 90 90v8c0 49.7-40.3 90-90 90zM497.9 815H273.4c-22 0-38-20.7-32.6-42l24.9-97.4c10-39.2 45.3-66.6 85.8-66.6H420c40.5 0 75.8 27.4 85.8 66.6l24.9 97.4c5.2 21.3-10.9 42-32.8 42z"
                      fill="#B8EADA"
                      p-id="4298"
                    ></path>
                    <path
                      d="M912.5 498h-100c-16.8 0-30.5-13.7-30.5-30.5s13.7-30.5 30.5-30.5h100c16.8 0 30.5 13.7 30.5 30.5S929.3 498 912.5 498zM912.5 630h-37c-16.8 0-30.5-13.7-30.5-30.5s13.7-30.5 30.5-30.5h37c16.8 0 30.5 13.7 30.5 30.5S929.3 630 912.5 630z"
                      fill="#24C891"
                      p-id="4299"
                    ></path>
                  </svg>
                  <div class="company-info">
                    <h3>{{ item.enterpriseName }}</h3>
                    <p>{{ item.jobName }}</p>
                  </div>
                </div>
                <div class="entry-info">
                  <p>姓名：{{ item.name }}</p>
                  <p>学生账号：{{ item.studentAccount }}</p>
                  <p>薪资：{{ item.salary }}</p>
                  <p>入职时间：{{ item.entryTime }}</p>
                  <p>入职地址：{{ item.jobLocation.join('') + item.jobDetailLocation }}</p>
                  <p>
                    入职状态：
                    <el-tag size="small" :type="getStatusEntryType(item.status)">
                      {{ getStatusEntryText(item.isentry) }}
                    </el-tag>
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 就业材料状态 -->
        <!-- <div v-if="activeTab === 3" class="materials-list">
          <el-collapse accordion>
            <el-collapse-item v-for="item in tableData" :key="item.id">
              <template #title>
                <div class="material-header">
                  <span>{{ item.enterpriseName }}</span>
                  <el-tag size="small" :type="getStatusType(item.status)">
                    {{ getStatusText(item.status) }}
                  </el-tag>
                </div>
              </template>
              <div class="material-content">
                <p>职位：{{ item.jobName }}</p>
                <p>上传时间：{{ item.uploadTime }}</p>
                <div class="material-files">
                  <h4>材料清单：</h4>
                  <el-tag
                    v-for="(material, index) in item.materials"
                    :key="index"
                    size="small"
                    effect="plain"
                  >
                    {{ material }}
                  </el-tag>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div> -->
      </div>

      <!-- 分页器只在有数据时显示 -->
      <Pagization
        v-if="tableData.length"
        ref="pagizationRef"
        :total="pagizationToatl"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></Pagization>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.license-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;

  .user-content {
    width: 100%;
    padding: 10px 50px;
    text-align: left;
    overflow: auto;

    :deep(.el-tabs) {
      margin-bottom: 20px;

      .el-tabs__header {
        margin-bottom: 20px;
      }
    }

    .demo-drawer {
      .drawer-content {
        .content-list {
          margin-bottom: 28px;

          span {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.status-content {
  margin: 20px 0;
  min-height: 200px; // 添加最小高度，避免空状态时页面抖动

  :deep(.el-empty) {
    padding: 40px 0;
  }

  .job-apply-list {
    .job-card {
      margin-bottom: 15px;

      .job-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        h3 {
          margin: 0;
          font-size: 18px;
        }
      }

      .job-info {
        .info-item {
          margin: 8px 0;

          span {
            margin-right: 8px;
            color: #909399;
          }
        }
      }

      .job-time {
        margin-top: 10px;
        color: #909399;
        font-size: 14px;
      }
    }
  }

  .interview-list {
    padding: 20px;

    .interview-card {
      .interview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #ebeef5;

        h4 {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }

      .interview-info {
        .info-section {
          margin-bottom: 16px;

          &:last-child {
            margin-bottom: 0;
          }

          .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            &:last-child {
              margin-bottom: 0;
            }

            .label {
              min-width: 90px;
              font-size: 14px;
              color: #606266;
              font-weight: 500;
            }

            span:not(.label) {
              color: #303133;
            }

            .el-tag {
              margin-left: 4px;
            }
          }
        }
      }
    }

    :deep(.el-timeline-item__node) {
      background-color: #409eff;
    }

    :deep(.el-timeline-item__timestamp) {
      color: #606266;
      font-size: 14px;
    }
  }

  .entry-list {
    .entry-card {
      margin-bottom: 20px;

      .entry-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .company-info {
          margin-left: 15px;

          h3 {
            margin: 0;
            font-size: 16px;
          }

          p {
            margin: 5px 0 0;
            color: #606266;
          }
        }
      }

      .entry-info {
        p {
          margin: 8px 0;
          color: #606266;
        }
      }
    }
  }

  .materials-list {
    .material-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .material-content {
      padding: 10px;

      p {
        margin: 8px 0;
        color: #606266;
      }

      .material-files {
        margin-top: 15px;

        h4 {
          margin: 0 0 10px;
        }

        .el-tag {
          margin: 0 8px 8px 0;
        }
      }
    }
  }
}
</style>
